<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" media="all" type="text/css" href="style/style-demo.css">

    <script src="script/jquery-1.11.1.js"></script>
    <script src="script/jquery.easing-1.3.js"></script>
    <script src="script/jquery.mousewheel-3.1.12.js"></script>
    <script src="script/jquery.jcarousellite.js"></script>
</head>
<body>

<div id="jcl-demo">

    <!-- Demo 8 -->
    <h4 id="demo8">Vertical</h4><hr>

    <p>
        Now you can even tilt it vertically, or horizontally. Can it get any better?
    </p>


    <div class="custom-container vertical">
        <a href="#" class="prev">&lsaquo;</a>
        <div class="carousel">
            <ul>
                <li><img src="image/1.jpg"></li>
                <li><img src="image/2.jpg"></li>
                <li><img src="image/3.jpg"></li>
                <li><img src="image/4.jpg"></li>
                <li><img src="image/5.jpg"></li>
                <li><img src="image/6.jpg"></li>
                <li><img src="image/7.jpg"></li>
                <li><img src="image/8.jpg"></li>
                <li><img src="image/9.jpg"></li>
                <li><img src="image/10.jpg"></li>
                <li><img src="image/11.jpg"></li>
            </ul>
        </div>
        <a href="#" class="next">&rsaquo;</a>
        <div class="clear"></div>
    </div>

<pre class="prettyprint">
$(".vertical .carousel").jCarouselLite({
    btnNext: ".vertical .next",
    btnPrev: ".vertical .prev",
    vertical: true
});
</pre>

    <script type="text/javascript">
        $(function() {
            $(".vertical .carousel").jCarouselLite({
                btnNext: ".vertical .next",
                btnPrev: ".vertical .prev",
                vertical: true
            });
        });
    </script>

</div>
</body>
</html>